<template>
  <header v-if="!$store.state.specialRouters.includes($route.path)" class="md-shared-header" :class="[$store.state.fixed ? 'md-shared-header-fixed' : '']" @click="isShowSearchBox = false">
    <div class="md-nav-welcome">
      <p>欢迎 {{userInfo?.dept?.deptName}}</p>
      <!-- <p>123123</p> -->
    </div>
    <div class="md-nav-box">
      <div class="md-nav-panel">
        <img :src="`/video-dev${logo}`" @click="handleNav({ path: '/home' })" alt="">
        <ul class="class-list">
          <li class="class-item" v-for="(item, index) in navList" :key="index" @click="handleNav(item)">
            <span :class="$route.path === item.path ? 'active' : ''">{{item.name}}</span>
          </li>
          <!-- 只有首页展示 -->
          <div class="search-box" style="margin-left: 50px" v-if="$route.path === '/home'">
            <el-input placeholder="请输入关键字..." class="search-input" v-model="searchVal">
              <i slot="suffix" class="el-icon-search" @click="handleSearch"></i>
            </el-input>
          </div>
        </ul>
      </div>
      <div class="nav-left">
        <i class="el-icon-search" v-show="!isShowSearchBox && $route.path !== '/home'" @click.stop="isShowSearchBox = true"></i>
        <div class="search-box" v-show="isShowSearchBox" @click.stop="isShowSearchBox = true">
          <el-input class="search-input" v-model="searchVal">
            <i slot="suffix" class="el-icon-search" @click="handleSearch"></i>
          </el-input>
        </div>
        <MdNavClassComponent />
      </div>
    </div>
  </header>
</template>

<script>
import { getConfigType } from '@/axios/home'
import MdNavClassComponent from '../components/class/mdNav/index.vue'
export default {
  name: 'MdSharedHeaderComponent',
  components: {
    MdNavClassComponent
  },
  data () {
    return {
      logo: '',
      deptName: '',
      user: null,
      isShowSearchBox: false,
      searchVal: '',
      navList: [
        {
          name: '首页',
          path: '/home'
        },
        {
          name: '酷学课程',
          path: '/category'
        },
        {
          name: '酷学题库',
          path: '/topics'
        },
        {
          name: '酷学资讯',
          path: '/news'
        },
        {
          name: '酷学直播',
          path: '/live'
        },{
          name: '酷学名师',
          path: '/live'
        }

      ]
    }
  },
  computed: {
    isLogin () {
      return window.localStorage.getItem('isLogin')
    },
    userInfo () {
      return JSON.parse(window.localStorage.getItem('userInfo'))
    }
  },
  watch: {
    '$store.state.user.dept': {
      handler (val) {
        this.deptName = val.deptName
      }
    }
  },
  mounted () {
    this.user = this.$local.getItem('user')
    this.handleListenerScroll()
    this.getConfigType()
  },
  beforeDestroy () {
    this.isShowSearchBox = false
  },
  methods: {
    // logo
    async getConfigType () {
      const res = await getConfigType('web:logo')
      if (res.code === 200) {
        this.logo = res.msg
      }
    },
    handleSearch () {
      if (this.isLogin) {
        if (!this.searchVal) {
          this.$message.error('请输入关键字')
          return
        }
        this.$router.push({
          path: '/search',
          query: {
            keyword: this.searchVal
          }
        })
        this.searchVal = ''
      } else {
        this.$confirm('是否去登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path: '/login'
          })
        }).catch(() => { });
      }
    },
    handleNav (item) {
      // 酷学题库、酷学资讯 新开页面
      if (['/topics', '/news'].includes(item.path)) {
        window.open(item.path)
      } else {
        this.$router.push({
          path: item.path
        })
      }
    },
    handleGoHome () {
      window.open('/')
    },
    handleListenerScroll () {
      window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.$store.state.fixed = scrollTop > 80
        if (['/login'].includes(this.$route.path)) {
          this.$store.state.fixed = true
        }
      })
    },
    handleCreateActivity () {
      if (!this.user) {
        this.$router.push('/login')
      } else {
        this.$router.push('/manage/home')
      }
    },
    handleMouseover (index) {
      this.subMenusIndex = index
    },
    handleSubMenuClick (item) {
      this.$router.push(item.url)
    }
  }
}
</script>

<style lang="less" scoped>
.md-shared-header {
  width: 100%;
  height: @md-header-height + 30px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 998;
  background: rgba(0, 0, 0, .5);
  &.md-shared-header-fixed {
    // background-color: #fff !important;
    box-shadow: 0 6px 10px 0 rgb(0 0 0 / 2%) !important;
  }
  .md-nav-welcome {
    width: 100%;
    p {
      padding-top: 5px;
      width: 1152px;
      height: 30px;
      line-height: 30px;
      margin: 0 auto;
      color: #888;
    }
  }
  .md-nav-box {
    width: 1152px;
    height: @md-header-height;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .md-nav-panel {
      display: flex;
      align-items: center;
      img {
        cursor: pointer;
        height: @md-header-height - 20px;
        margin-right: 30px;
      }
      .class-list {
        display: flex;
        align-items: center;
        .class-item {
          &:first-child {
            span {
              padding-left: 0;
            }
          }
          &:last-child {
            span {
              padding-right: 0;
            }
          }
          span {
            cursor: pointer;
            display: block;
            font-size: 16px;
            height: 63px;
            color: aliceblue;
            line-height: 63px;
            position: relative;
            padding: 0 16px;
            &:hover {
              color: @md-primary-color;
            }
          }
          .active {
            color: @md-primary-color;
            font-weight: 500;
          }
        }
      }
    }
    .nav-left {
      height: 100%;
      font-size: 20px;
      color:white;
      display: flex;
      align-items: center;
      margin: 0 20px;
      i {
        font-weight: bold;
        cursor: pointer;
        &:hover {
          color: @md-primary-color;
        }
      }
    }
  }
}
.search-box {
  /deep/ .search-input {
    .el-input__inner {
      border: none;
      width: 240px;
      box-sizing: border-box;
      background: #f3f5f6;
      border-radius: 4px;
    }
    .el-input__suffix {
      i {
        margin-top: 10px;
        margin-right: 3px;
        font-size: 20px;
        font-weight: bold;
        color: #545c63;
        cursor: pointer;
        &:hover {
          color: @md-primary-color;
        }
      }
    }
  }
}
</style>
